<div class="layui-fluid">
  <div class="layui-card ycon">
    <div class="layui-row info_cen">
      <div class="layui-col-md12">
        <button class="layui-btn layui-btn-danger" *ngIf="!perform" (click)="perform=true"><i
            class="layui-icon">&#xe669;</i>执行</button>
        <button class="layui-btn layui-btn-danger left" *ngIf="perform" (click)="performSub()">确定执行</button>
        <button class="layui-btn" *ngIf="perform" (click)="perform=false;performList=[]">取消执行</button>
        <button class="layui-btn layui-btn-blue" *ngIf="isRemarks" (click)="remarksWrite()"><i
            class="layui-icon">&#xe642;</i>写入</button>
      </div>
      <div class="layui-form layui-col-md3 info_left">
        <div class="layui-tab-item layui-show">
          <div class="layui-col-md1">
            <button nz-button nzType="default" nzShape="circle" [disabled]="folderName==='根'"
              (click)="directory(folderPath,'1')">
              <i nz-icon type="arrow-left"></i>
            </button>
          </div>
          <div class="layui-col-md10">
            <div class="address">
              <!-- <p style="border:1px solid red;width:2000px;">
                {{address | json}} └│
                ***{{folderList | json}}---
              </p> -->
              {{folderName}}
            </div>
          </div>
          <div class="layui-col-md1">
            <nz-dropdown [nzPlacement]="'bottomRight'">
              <button nz-button nz-dropdown nzType="default" nzShape="circle">
                <i nz-icon type="menu-fold"></i>
              </button>
              <ul nz-menu>
                <ng-container *ngFor="let list of address; let a = index">
                  <li nz-menu-item (click)="directory(list.catalogue)" [ngStyle]="{'padding-left': a*10+'px'}">
                    <a>└ {{list.showName}}</a>
                  </li>
                </ng-container>
              </ul>
            </nz-dropdown>
          </div>
        </div>
        <ng-template #contextTemplate>
          <ul nz-menu nzInDropDown nzSelectable (mouseleave)="dropdownClose()" style="position: absolute;left:0px;top:-10px;">
            <li nz-menu-item (click)="remarksOpen()">
              <span>修改备注</span>
            </li>
          </ul>
        </ng-template>
        <div class="layui-form info_left_top">
          <ul *ngIf="!perform">
            <ng-container *ngFor="let list of folderList; let a = index">
              <ng-container *ngIf="list.fileType==='folder'">
                <li title="{{list.fullPathName}}" (dblclick)="directory(list.fullPathName)"
                  (contextmenu)="contextMenu($event, contextTemplate,list)">
                  <p class="index"><button nz-button nzType="default" nzShape="circle"><i nz-icon
                        type="folder-open"></i></button>{{list.fileName}}</p>
                  <p class="info" [ngStyle]="{'width': infoWidth}">{{list.remarks}}</p>
                </li>
              </ng-container>
              <ng-container *ngIf="list.fileType==='file'">
                <li title="{{list.fullPathName}}" (dblclick)="infoLog(list)" (contextmenu)="contextMenu($event, contextTemplate,list)">
                  <p class="index"><button nz-button nzType="default" nzShape="circle"><i nz-icon
                        type="file"></i></button>{{list.fileName}}</p>
                  <p class="info" [ngStyle]="{'width': infoWidth}">{{list.remarks}}</p>
                </li>
              </ng-container>
            </ng-container>
          </ul>
          <ul *ngIf="perform">
            <nz-checkbox-wrapper (nzOnChange)="performCheck($event)"style="width: 100%;">
              <ng-container *ngFor="let list of folderList; let a = index">
                <ng-container *ngIf="list.fileType==='folder'">
                  <li title="{{list.fullPathName}}" nz-checkbox [nzValue]="list.fullPathName"
                    style="padding-left: 12px;">
                    <label class="index"><button nz-button nzType="default" nzShape="circle"><i nz-icon
                          type="folder-open"></i></button>{{list.fileName}}</label>
                    <!-- <label class="info" [ngStyle]="{'width': infoWidth}">{{list.remarks}}</label> -->
                  </li>
                </ng-container>
                <ng-container *ngIf="list.fileType==='file'">
                  <li title="{{list.fullPathName}}" nz-checkbox [nzValue]="list.fullPathName"
                    style="padding-left: 12px;">
                    <label class="index"><button nz-button nzType="default" nzShape="circle"><i nz-icon
                          type="file"></i></button>{{list.fileName}}</label>
                    <!-- <label class="info" [ngStyle]="{'width': infoWidth}">{{list.remarks}}</label> -->
                  </li>
                </ng-container>
              </ng-container>
            </nz-checkbox-wrapper>
          </ul>
        </div>
      </div>

      <div class="info_right layui-col-md9">
        <fieldset class="layui-elem-field info_right_top">
          <div class="layui-field-box">
            <div class="layui-tab-item layui-show layui-col-space5" style="text-align:center;">
              {{isName}}
            </div>
          </div>
        </fieldset>

        <div class="layui-tab layui-tab-card info_right_bot3">
          <ul class="layui-tab-title">
            <li class="layui-this info_basic">内容</li>
            <li>日志</li>
            <!-- <button nz-button nzType="primary" [hidden]="edit_updata" (click)="edit()" class="edit_updata">修改</button> -->
          </ul>
          <style>
            .layui-tab-content .putitem span {
              width: 100px;
            }
          </style>
          <div class="layui-tab-content" style="height: 600px;">
            <!-- 内容 -->            
            <div class="layui-tab-item layui-show" style="width: 100%;">
              <pre id="infoText" style="height: 580px;">{{infoText}}</pre>
              <!-- <pre class="layui-code" lay-title="内容">
                //代码区域
                var a = 'hello layui';
                {{infoText | json}}
              </pre> -->
            </div>
            <!-- 日志 -->
            <div class="layui-tab-item">
              <pre id="logText" style="height: 580px;">{{logText}}</pre>
            </div>

          </div>
        </div>
      </div>
    </div>
  </div>
</div>


<nz-modal [(nzVisible)]="remarks" *ngIf="remarks" nzTitle="修改备注" [nzMask]="true"
  [nzMaskStyle]="{backgroundColor:'rgba(0,0,0,.22)'}" [nzWidth]="550" [nzFooter]="null" (nzOnCancel)="remarksClose()"
  nzMaskClosable="false">
  <div style="height:250px;">
    <div class="putitem">
      <span>名称:</span> <input nz-input nzSize="default" autocomplete="off" class="disabled"
        [(ngModel)]="editInfo['fileName']" disabled style="width: 350px;">
    </div>
    <div class="putitem">
      <span>url：</span> <input nz-input nzSize="default" autocomplete="off" class="disabled"
        [(ngModel)]="editInfo['fullPathName']" disabled style="width: 350px;">
    </div>
    <div class="putitem" style="height:100px;">
      <span>备注：</span>
      <textarea placeholder="备注" class="layui-textarea yhinfo" style="width: 350px;height:50px;"
        [(ngModel)]="editInfo['remarks']">{{editInfo['remarks']}}</textarea>
    </div>
    <div class="putitems" style="padding-top:10px; padding-left:160px;">
      <button nz-button nzType="primary" (click)="editRemarks()">确定</button>
      <button nz-button nzType="default" (click)="remarksClose()">取消</button>
    </div>
  </div>
</nz-modal>